<template>
	<div class="container">
		<div class="jx-container">
      <div class="jx-table">
        <div class="title">
          <img class="icon" src="/static/img/icon-platform.png"/>
          保险账号配置
          <div class="add-new">
            <el-button class="jx-btn" type="primary" @click="addRow">新增</el-button>
          </div>
        </div>
        <el-table :data="list" border style="width: 100%" :span-method="objectSpanMethod" v-loading="boo.loading">
          <el-table-column type="index" label="序列" width="60" align="center">
            <template slot-scope="scope">
              <span>{{(scope.$index + 1) + ((params_list.page - 1) * params_list.size)}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="id" label="壁虎ID" align="center" width="150" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="name" label="账号主体" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="no" label="出单账号" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="scname" label="保司" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="type" label="账号类型" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="address" label="适用地区" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="is" label="云途续保" align="center" :show-overflow-tooltip="true">
          </el-table-column>
           <el-table-column label="操作" align="center" width="150">
            <template slot-scope="scope">
              <el-button @click="viewRow(scope.row)" type="text" size="small">配置</el-button>
              <el-button @click="hiddenRow(scope.row)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div v-if="list.length != 0" class="jx-pagination">
           <el-pagination @current-change="pageChange" @size-change="handleSizeChange" :current-page="params_list.page" :page-sizes="[10,50,100]" :page-size="params_list.size" layout="total, sizes, prev, pager, next, jumper"
            :total="other.allRow">
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 新增 -->
    <el-dialog  :visible.sync="boo.showDetail" class="jx-dialog" width="65%">
      <div slot="title" class="header-title">
        <span class="title-name">新增账号</span>
      </div>
      <el-form ref="newform" :model="currentRow" :rules="rules_add" label-width="130px" class="jx-form">
        <div class="jx-detail">
          <div class="detail-item">
            <div class="item">
              <el-form-item label="账号ID：" prop="id">
                <el-input class="tel-value" v-model="currentRow.id" placeholder="请输入壁虎账号ID"></el-input>
              </el-form-item>
            </div>
          </div>
        </div> 
      </el-form>
      <div class="btn-container">
        <el-button class="jx-btn" type="primary" :loading="boo.saveing_add" @click="submitRow_add('newform')">确认添加，并同步账号</el-button>
      </div>
    </el-dialog>
    <!-- 配置 -->
    <el-dialog  :visible.sync="boo.showDialog" class="jx-dialog" width="65%">
      <div slot="title" class="header-title">
        <span class="title-name">配置</span>
      </div>
      <el-form ref="form" :model="currentRow" :rules="rules" label-width="130px" class="jx-form">
        <div class="jx-detail">
          <div class="detail-item">
            <div class="item">
              <el-form-item label="账号主体：">
                <!-- <el-input class="tel-value" v-model="currentRow.name" disabled></el-input> -->
                <el-input class="tel-value" placeholder="安徽盛世盈通保险代理有限公司" disabled></el-input>
              </el-form-item>
              <el-form-item label="出单账号：">
                <el-input class="tel-value" placeholder="23345512323" disabled></el-input>
              </el-form-item>
              <el-form-item label="出单地区：" prop="address">
                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全国</el-checkbox>
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group v-model="currentRow.address" @change="handleCheckedCitiesChange">
                  <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="云途续保：" prop="is">
                <el-radio-group v-model="currentRow.is">
                  <el-radio :label="1">支持</el-radio>
                  <el-radio :label="2">不支持</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
          </div>
        </div> 
      </el-form>
      <div class="btn-container">
        <el-button class="jx-btn" type="warning" @click="boo.showDialog = false">取消</el-button>
        <el-button class="jx-btn" type="primary" :loading="boo.saveing" @click="submitRow('form')">提交</el-button>
      </div>
    </el-dialog>
	</div>
</template>

<script>
  import list from 'static/json/set/list.json'
  const cityOptions = ['上海', '北京', '广州', '深圳'];
	export default {
		data() {
			return {
        boo: {
          loading: false,
          showDialog: false,
          saveing: false,
          showDetail: false,
          saveing_add: false,
        },
        other: {
          allRow: 1,
        },
        list: list,
        currentRow: {address: []},
        params_list: {
          page: 1,
          size: 10,
        },
        checkAll: false,
        isIndeterminate: true,
        cities: cityOptions,
        rules: {
          address: [{ required: true, message: '请选择出单地区', trigger: 'change' }],
          is: [{ required: true, message: '请选择是否续保', trigger: 'change' }],
        },
        rules_add: {
          id: [{ required: true, message: '请输入壁虎账号ID', trigger: 'blur' }],
        }
			}
		},
		mounted(){
      let _self = this
      _self.getList()
    },
		methods: {
      getList(){
        let _self = this
        _self.getSpanArr(_self.list)
      },
      getSpanArr (data) {
        this.spanArr = []
        for (var i = 0; i < data.length; i++) {
          if (i === 0) {
            // 如果是第一条记录（即索引是0的时候），向数组中加入１
            this.spanArr.push(1)
            this.pos = 0
          } else {
            if (data[i].id === data[i - 1].id) {
              // 如果useName相等就累加，并且push 0
              this.spanArr[this.pos] += 1
              this.spanArr.push(0)
            }else {
              // 不相等push 1
              this.spanArr.push(1)
              this.pos = i
            }
          }
        }
      },
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 1) {
          const _row = this.spanArr[rowIndex]
          const _col = _row > 0 ? 1 : 0
          return {
            rowspan: _row,
            colspan: _col
          }
        }
      },
      pageChange(val){
        let _self = this
        _self.params_list.page = val
        _self.getList()
      },
      handleSizeChange(val) {
        let _self = this
        _self.params_list.size = val
        _self.getList()
      },
      addRow(){
        let _self = this
        _self.currentRow = {}
        _self.boo.showDetail = true
      },
      submitRow_add(formName){
        let _self = this
				this.$refs[formName].validate((vaild)=>{
					if(vaild){  
            _self.boo.showDialog = false     
					}else{
						return false
					}
				})
      },
      viewRow(item){
        let _self = this
        _self.currentRow = {address: []}
        _self.boo.showDialog = true
      },
      hiddenRow(){},
      handleCheckAllChange(val) {
        let _self = this
        _self.currentRow.address = val ? _self.cities : [];
        _self.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let _self = this
        let checkedCount = value.length;
        _self.checkAll = checkedCount === _self.cities.length;
        _self.isIndeterminate = checkedCount > 0 && checkedCount < _self.cities.length;
      },
      submitRow(formName){
        let _self = this
				this.$refs[formName].validate((vaild)=>{
					if(vaild){  
            _self.boo.showDialog = false     
					}else{
						return false
					}
				})
      }
    }
	}

</script>
<style scoped lang="sass">
  .select-type .table-item .right span
    width: 78px
</style>
